<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
    <head>
        <th:block th:include="include :: header('新增假期时间')"/>
        <th:block th:include="include :: datetimepicker-css"/>
    </head>
    <body class="white-bg">
        <div class="wrapper wrapper-content animated fadeInRight ibox-content">
            <form class="form-horizontal m" id="form-date-edit" th:object="${holidayDate}">
                <input name="id" th:field="*{id}" type="hidden">
                <div class="form-group">
                    <label class="col-sm-3 control-label">假期名称：</label>
                    <div class="col-sm-8">
                        <select name="holiday.id" id="holidayName" class="form-control" required>
                            <option value="">所有</option>
                            <option th:each="holiday : ${holidayList}" th:selected="${holidayDate.holiday.id eq holiday.id}" th:text="${holiday.name}" th:value="${holiday.id}"></option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">假期时间：</label>
                    <div class="col-sm-8">
                        <input type="text" class="input-sm form-control inline" id="jiaqiriqi" placeholder=" yyyy-MM-dd " autocomplete="off" th:value="${#dates.format(holidayDate.beginDate, 'yyyy-MM-dd')} + ' - ' + ${#dates.format(holidayDate.finishDate, 'yyyy-MM-dd')}" required>
                        <input type="hidden" name="beginDate" class="input-sm form-control inline" id="laydate-startTime" th:value="${#dates.format(holidayDate.beginDate, 'yyyy-MM-dd')}"/>
                        <input type="hidden" name="finishDate" class="input-sm form-control inline" id="laydate-endTime" th:value="${#dates.format(holidayDate.finishDate, 'yyyy-MM-dd')}"/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">调休时间：</label>
                    <div class="col-sm-8" id="tiaoxiu">
                        <span class="btn btn-primary" onclick="appendTiaoXiuItem()" style="margin-top: 10px;"><i class="fa fa-plus"></i> 添加调休时间</span>
                    </div>
                </div>
            </form>
        </div>
        <th:block th:include="include :: footer"/>
        <th:block th:include="include :: datetimepicker-js"/>
        <script th:inline="javascript">
            var prefix = ctx + "oa/date"
            var prefix2 = ctx + "oa/workingDate"
            var prefix3 = ctx + "oa/holiday";
            var holidayId = [[${holidayDate.holiday.id}]];

            //用于判断上一条是否填写如果没填写则不能添加下一条
            var tiaoxiuItemVar = 0;

            //记录着假期时间
            var jiaqishijian1 = [[${holidayDate.beginDate}]];
            var jiaqishijian2 = [[${holidayDate.finishDate}]];


            $("#form-date-edit").validate({
                focusCleanup: true
            });


            //回显调休日期
            $.ajax({
                url: prefix2 + "/list",
                type: 'POST',
                data: {
                    "holiday.id": holidayId
                },
                dataType: 'json',
                success: function (obj) {
                    var data = obj.rows;
                    console.log(data)
                    var dateMonth;
                    var dateDate;
                    for (let i = 0; i < data.length; i++) {
                        //日期格式化
                        var dateTime = new Date(new Date(data[i].date).getTime());
                        if (dateTime.getMonth() < 9) {
                            dateMonth = "0" + (dateTime.getMonth() + 1);
                        } else {
                            dateMonth = (dateTime.getMonth() + 1);
                        }
                        if (dateTime.getDate() < 10) {
                            dateDate = "0" + dateTime.getDate();
                        } else {
                            dateDate = dateTime.getDate();
                        }
                        var date = dateTime.getFullYear() + "-" + dateMonth + "-" + dateDate;

                        //生成随机数赋值id
                        var random = Math.floor(Math.random() * 9999);
                        tiaoxiuItemVar = "input" + random;

                        $("#tiaoxiu").prepend('' +
                            '<div class="tiaoxiu-item" id="item' + random + '" style="margin-top: 5px;">\n' +
                            '<div class="input-inline">\n' +
                            '<input type="text" class="input-sm form-control inline tiaoxiuinput" id="input' + random + '" placeholder=" - " name="holidayWorkingDate" value="' + date + '" style="width: 50%;">\n' +
                            '<span class="btn btn-danger" onclick="removeTiaoXiuItem(' + random + ',' + data[i].id + ',0)"><i class="fa fa-remove"></i> 删除</span>\n' +
                            '</div>\n' +
                            '</div>');
                    }

                    //给input标签创建日期插件
                    layui.use('laydate', function () {
                        var laydate = layui.laydate;

                        lay('.tiaoxiuinput').each(function () {
                            laydate.render({
                                elem: this
                                , trigger: 'click'
                            });
                        });
                    });
                }
            })

            //添加调休节点
            function appendTiaoXiuItem() {
                if (jiaqishijian1 == null || jiaqishijian2 == '') {
                    $.modal.alertError("请选择假期时间后再进行添加!");
                    return;
                }
                if (tiaoxiuItemVar != 0) {
                    var txitvalue = $("#" + tiaoxiuItemVar).val();
                    if (txitvalue == null || txitvalue == '') {
                        $.modal.alertError("请完成调休时间的填写才可以继续添加!");
                        return;
                    }
                }
                //生成随机数赋值id
                var random = Math.floor(Math.random() * 9999);
                tiaoxiuItemVar = "input" + random;
                $("#tiaoxiu").prepend('' +
                    '<div class="tiaoxiu-item" id="item' + random + '" style="margin-top: 5px;">\n' +
                    '<div class="input-inline">\n' +
                    '<input type="text" class="input-sm form-control inline" id="input' + random + '" placeholder=" - " name="holidayWorkingDate" style="width: 50%;">\n' +
                    '<span class="btn btn-danger" onclick="removeTiaoXiuItem(' + random + ',0,1)"><i class="fa fa-remove"></i> 删除</span>\n' +
                    '</div>\n' +
                    '</div>');
                layui.use('laydate', function () {
                    var laydate = layui.laydate;
                    var ins1 = laydate.render({
                        elem: '#input' + random
                    });
                });
            }

            //删除调休节点
            function removeTiaoXiuItem(itemId, id, type) {
                tiaoxiuItemVar = 0;
                //如果为旧数则删除节点并删除数据库数据
                var item = "item" + itemId;
                $("#" + item).empty();
                if (type == 0) {
                    $.ajax({
                        url: prefix2 + "/remove",
                        type: 'POST',
                        data: {
                            "id": id
                        },
                        dataType: 'json'
                    });
                }
            };


            //提交表单
            function submitHandler() {
                if ($.validate.form()) {
                    $.operate.save(prefix + "/edit", $('#form-date-edit').serialize())
                }
            }

            /*开始时间和结束时间时间*/
            layui.use('laydate', function () {
                var laydate = layui.laydate;

                //假期时间的选择
                laydate.render({
                    elem: '#jiaqiriqi'
                    , range: true
                    , done: function (value, startDate, endDate) {
                        jiaqishijian1 = startDate.year + "-" + startDate.month + "-" + startDate.date;
                        jiaqishijian2 = endDate.year + "-" + endDate.month + "-" + endDate.date;
                        $("#laydate-startTime").val(jiaqishijian1);
                        $("#laydate-endTime").val(jiaqishijian2);
                    }
                });
            });
        </script>
    </body>
</html>